<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color:red;
        }
        span{
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 45px;
        }
        
        img{
            width: 200px;
            height: 200px;
        }
        .box2{
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <b>行内元素和块级元素的区别：（非常重要）</b>
        <p>行内元素：</p>
        <ul>
           <li>与其他行内元素并排；</li>
           <li>不能设置宽、高。默认的宽度，就是文字的宽度。</li>
        </ul>
        <p>块级元素：</p>
        <ul>
           <li>霸占一行，不能与其他任何元素并列；</li>
           <li>能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。</li>
        </ul>
    </div>
    <div class="box">内容1</div>
    <div class="box">内容2</div>
    <span>内容1</span>
    <span>内容2</span>

    <div class="box2">
        <img src="./imgs/1.png" alt="">
    </div>
    <p>哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈啊哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈和 </p>
        
   

</body>
</html>